<template>
  <div class="news">
    <ul>
      <li v-for="news in newsList":key="news.id">
        <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&comtent=${news.content}`">{{ news.title }}</RouterLink>
      </li>
    </ul>
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
  import { reactive } from 'vue';
  import { RouterView } from 'vue-router';
  const newsList=reactive([
    {id:'01',title:'2024十大新闻事件',content:'balabala'},
    {id:'02',title:'2023十大新闻事件',content:'balabala'},
    {id:'03',title:'2022十大新闻事件',content:'balabala'},
    {id:'04',title:'2021十大新闻事件',content:'balabala'},
  ])
</script>
    
<style scoped>/* 新闻 */
  .news {
    padding: 0 20px; 
    display: flex;
    justify-content:space-between; 
    height: 100%;
  }
  .news ul {
    margin-top: 30px; 
    /*list-style: none; */
    padding-left: 10px;
  } 
  .news li::marker {
    color: #64967E;
  }
  .news li>a {
    font-size: 18px; 
    line-height: 40px;
    text-decoration: none; 
    color: #64967E;
    text-shadow: 0 0 1px rgb(0,84,0);
  }
  .news-content { 
    width: 70%; 
    height: 90%;
    border: 1px solid; 
    margin-top: 20px; 
    border-radius: 10px;
  }
</style>